<!doctype html>
<html lang="en" class="dark font-sans antialiased">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/component.css" rel="stylesheet" />
    <script src="/component.js" defer></script>
  </head>
  <body class="mx-auto max-w-xs p-6">
    <div>
      <label for="Headline">
        <span class="text-sm font-medium text-gray-700 dark:text-gray-200"> Headliner </span>

        <select
          name="Headline"
          id="Headline"
          class="mt-0.5 w-full rounded border-gray-300 shadow-sm sm:text-sm dark:border-gray-600 dark:bg-gray-900 dark:text-white"
        >
          <option value="">Please select</option>

          <optgroup label="A">
            <option value="AK">Albert King</option>
          </optgroup>

          <optgroup label="B">
            <option value="BBK">B.B King</option>
            <option value="BG">Buddy Guy</option>
          </optgroup>

          <optgroup label="E">
            <option value="EC">Eric Clapton</option>
          </optgroup>

          <optgroup label="J">
            <option value="JM">John Mayer</option>
            <option value="JH">Jimi Hendrix</option>
          </optgroup>

          <optgroup label="S">
            <option value="SRV">Stevie Ray Vaughn</option>
          </optgroup>
        </select>
      </label>
    </div>
  </body>
</html>
